<template>
  <div>
    <a-card>
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        
      </vxe-grid>
    </a-card>
    <DraggableModal
      v-model:open="showEditPopup"
      title="新增角色"
      :keyboard="false"
      @ok="confirmEvent"
    >
      <vxe-form ref="formRef" v-bind="formOptions"></vxe-form>
    </DraggableModal>
  </div>
</template>

<script setup lang="ts">
import { VxeUI } from "vxe-pc-ui";
const { gridOptions } = useRole();
import XEUtils from "xe-utils";
const formRef = ref();
const showEditPopup = ref(false);
const loading = ref(false);
const selectRow = ref<RowVO>();
const defaultData: RowVO = {
  id: null,
  name: "",
  nickname: "",
  role: "",
  sex: "",
  age: null,
  address: "",
};
const sexItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: "VxeSelect",
  options: [
    { label: "女", value: "Women" },
    { label: "男", value: "Man" },
  ],
});

const formOptions = reactive<VxeFormProps<RowVO>>({
  titleWidth: 80,
  titleAlign: 'right',
  titleColon: true,
  data: XEUtils.clone(defaultData, true),
  rules: {
    name: [
      { required: true, message: '请输入名称' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
    ],
    value: [
      { required: true, message: '请输入标识' }
    ],
    remark: [
      { required: true, message: '请输入备注' }
    ]
  },
  items: [
    { field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'value', title: '标识', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'remark', title: '备注', span: 24,itemRender: { name: 'VxeTextarea', props: { autosize: { minRows: 2, maxRows: 4 } } } },
  ]
})
const addEvent = () => {
  selectRow.value = undefined;
  formOptions.data = XEUtils.clone(defaultData, true);
  showEditPopup.value = true;
};

const editRow = (row: RowVO) => {
  selectRow.value = row;
  formOptions.data = Object.assign(XEUtils.clone(defaultData, true), row);
  showEditPopup.value = true;
};

const confirmEvent = async () => {
  const $form = formRef.value;
  if ($form) {
    const errMap = await $form.validate();
    if (!errMap) {
      showEditPopup.value = false;
      VxeUI.modal.message({ content: "保存成功", status: "success" });
    }
  }
};
const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
const edit = (row: any) => {
  console.log(row);
};
const remove = (row: any) => {
  console.log(row);
};
</script>

<style></style>
